<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Widgets in PyGTK</title>
<link rel="stylesheet" href="/cfg/format.css" type="text/css">
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="keywords" content="GUI, PyGTK, widgets, programming, Linux">
<meta name="description" content="Widgets in PyGTK">
<meta name="language" content="en">
<meta name="author" content="Jan Bodnar">
<meta name="distribution" content="global">

<script type="text/javascript" src="/lib/jquery.js"></script>
<script type="text/javascript" src="/lib/common.js"></script>

</head>

<body>

<div class="container">

<div id="wide_ad" class="ltow">
<script type="text/javascript"><!--
google_ad_client = "pub-9706709751191532";
/* 160x600, August 2011 */
google_ad_slot = "2484182563";
google_ad_width = 160;
google_ad_height = 600;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div> 

<div class="content">


<a href="/" title="Home">Home</a>&nbsp;
<a href="..">Contents</a>


<h1>Widgets in PyGTK</h1>

<p>
In this part of the PyGTK programming tutorial, we will introduce some PyGTK widgets.
</p>

<script type="text/javascript"><!--
google_ad_client = "pub-9706709751191532";
/* NewSquare */
google_ad_slot = "0364418177";
google_ad_width = 300;
google_ad_height = 250;
//-->
</script> 
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> 
</script>


<p>
Widgets are basic building blocks of a GUI application. Over the years, several widgets became 
a standard in all toolkits on all OS platforms. For example a button, 
a check box or a scroll bar. The PyGTK toolkit's philosophy is to keep 
the number of widgets at a minimum level. More specialized widgets are 
created as custom PyGTK widgets.  
</p>


<h2>Label</h2>

<p>
The <b class="keyword">Label</b> widget displays a limited amount of read-only text.
</p>


<div class="codehead">label.py</div> 
<pre class="code">
#!/usr/bin/python

# ZetCode PyGTK tutorial 
#
# This example demonstrates the Label widget
#
# author: jan bodnar
# website: zetcode.com 
# last edited: February 2009

import gtk

lyrics = """Meet you downstairs in the bar and heard
your rolled up sleeves and your skull t-shirt
You say why did you do it with him today?
and sniff me out like I was Tanqueray

cause you're my fella, my guy
hand me your stella and fly
by the time I'm out the door
you tear men down like Roger Moore

I cheated myself
like I knew I would
I told ya, I was trouble
you know that I'm no good"""


class PyApp(gtk.Window): 
    def __init__(self):
        super(PyApp, self).__init__()
        
        self.set_position(gtk.WIN_POS_CENTER)
        self.set_border_width(8)
        self.connect("destroy", gtk.main_quit)
        self.set_title("You know I'm no Good")
        
        label = gtk.Label(lyrics)
        self.add(label)
        self.show_all()


PyApp()
gtk.main()
</pre>

<p>
The code example shows some lyrics on the window. 
</p>

<pre class="explanation">
lyrics = """Meet you downstairs in the bar and heard
your rolled up sleeves and your skull t-shirt
..."""
</pre>

<p>
This is the text that we display.
</p>

<pre class="explanation">
 self.set_border_width(8)
</pre>

<p>
The <b class="keyword">Label</b> is surrounded by some empty space. 
</p>

<pre class="explanation">
 label = gtk.Label(lyrics)
 self.add(label)
</pre>

<p>
The <b class="keyword">Label</b> widget is created and added to the window. 
</p>


<br>
<img src="/img/gui/pygtk/lyrics.png" alt="Label Widget">
<div class="figure">Figure: Label Widget</div>
<br>


<h2>CheckButton</h2>

<p>
<b class="keyword">CheckButton</b> is a widget, that has two states. On and Off. 
The On state is visualised by a check mark. It is used to denote some boolean
property.
</p>

<div class="codehead">checkbutton.py</div> 
<pre class="code">
#!/usr/bin/python

# ZetCode PyGTK tutorial 
#
# This example demonstrates the CheckButton widget
#
# author: jan bodnar
# website: zetcode.com 
# last edited: February 2009

import gtk

class PyApp(gtk.Window):

    def __init__(self):
        super(PyApp, self).__init__()
        self.set_title("Check Button")
        self.set_position(gtk.WIN_POS_CENTER)
        self.set_default_size(250, 200)

        fixed = gtk.Fixed()
        button = gtk.CheckButton("Show title")
        button.set_active(True)
        button.unset_flags(gtk.CAN_FOCUS)
        button.connect("clicked", self.on_clicked)

        fixed.put(button, 50, 50)

        self.connect("destroy", gtk.main_quit)
        self.add(fixed)
        self.show_all()

    def on_clicked(self, widget):
        if widget.get_active():
            self.set_title("Check Button")
        else:
           self.set_title("")
        
PyApp()
gtk.main()
</pre>

<p>
We will display a title in the titlebar of the window,
depending on the state of the <b class="keyword">CheckButton</b>. 
</p>

<pre class="explanation">
 button = gtk.CheckButton("Show title")
</pre>

<p>
<b class="keyword">CheckButton</b> widget is created. 
</p>

<pre class="explanation">
 button.set_active(True)
</pre>

<p>
The title is visible by default, so we check the check button by default. 
</p>


<pre class="explanation">
 if widget.get_active():
     self.set_title("Check Button")
 else:
     self.set_title("")
</pre>

<p>
If the <b class="keyword">CheckButton</b> is checked
we show the title. Otherwise we put empty text in the
titlebar.
</p>


<br>
<img src="/img/gui/pygtk/checkbutton.png" alt="CheckButton">
<div class="figure">Figure: CheckButton</div>
<br>


<h2>ComboBox</h2>

<p>
<b class="keyword">ComboBox</b> is a widget that allows the 
user to choose from a list of options.
</p>

<div class="codehead">combobox.py</div>
<pre class="code">
#!/usr/bin/python

# ZetCode PyGTK tutorial 
#
# This example demonstrates the ComboBox widget
#
# author: jan bodnar
# website: zetcode.com 
# last edited: February 2009

import gtk

class PyApp(gtk.Window):
    def __init__(self):
        super(PyApp, self).__init__()
        
        self.set_title("ComboBox")
        self.set_default_size(250, 200)
        self.set_position(gtk.WIN_POS_CENTER)

        cb = gtk.combo_box_new_text()
        cb.connect("changed", self.on_changed)

        cb.append_text('Ubuntu')
        cb.append_text('Mandriva')
        cb.append_text('Redhat')
        cb.append_text('Gentoo')
        cb.append_text('Mint')
        
        fixed = gtk.Fixed()
        fixed.put(cb, 50, 30)
        self.label = gtk.Label("-")
        fixed.put(self.label, 50, 140)
        self.add(fixed)

        self.connect("destroy", gtk.main_quit)
        self.show_all()


    def on_changed(self, widget):
        self.label.set_label(widget.get_active_text()) 

PyApp()
gtk.main()
</pre>

<p>
The example shows a combo box and a label. The combo box has a 
list of six options. These are the names of Linux Distros. The label 
widget shows the selected option from the combo box. 
</p>

<pre class="explanation">
 cb = gtk.combo_box_new_text()
</pre>

<p>
The <b class="keyword">gtk.combo_box_new_text()</b> function is a convenience function that 
constructs a new text combo box. It is a <b class="keyword">ComboBox</b> just displaying strings.
</p>

<pre class="explanation">
 cb.append_text('Ubuntu')
 cb.append_text('Mandriva')
 cb.append_text('Redhat')
 cb.append_text('Gentoo')
 cb.append_text('Mint')
</pre>

<p>
The <b class="keyword">ComboBox</b> is filled with textual data. 
</p>

<pre class="explanation">
 self.label.set_label(widget.get_active_text()) 
</pre>

<p>
Inside the <b class="keyword">on_changed()</b> method, we get the selected
text out of the combo box and set it to the label. 
</p>


<br>
<img src="/img/gui/pygtk/combobox.png" alt="ComboBox">
<div class="figure">Figure: ComboBox</div>
<br>

<h2>Image</h2>

<p>
The next example introduces the <b class="keyword">Image</b> widget.
This widget displays pictures. 
</p>

<div class="codehead">image.py</div>
<pre class="code">
#!/usr/bin/python

# ZetCode PyGTK tutorial 
#
# This example demonstrates the Image widget
#
# author: jan bodnar
# website: zetcode.com 
# last edited: February 2009

import gtk

class PyApp(gtk.Window):

    def __init__(self):
        super(PyApp, self).__init__()
        
        self.set_title("Red Rock")
        self.set_position(gtk.WIN_POS_CENTER)
        self.set_border_width(2)

        image = gtk.Image()
        image.set_from_file("redrock.png")

        self.connect("destroy", gtk.main_quit)
        self.add(image)
        self.show_all()

PyApp()
gtk.main()
</pre>

<p>
We show the Red Rock castle in the window. 
</p>

<pre class="explanation">
 image = gtk.Image()
</pre>

<p>
<b class="keyword">Image</b> widget is created. 
</p>

<pre class="explanation">
 image.set_from_file("redrock.png")
</pre>

<p>
We set a png image to the
<b class="keyword">Image</b> widget. The picture is
loaded from the file on the disk.
</p>


<br>
<img src="/img/gui/pygtk/redrock.jpg" alt="Image">
<div class="figure">Figure: Image</div>

<hr class="btm">

<p>
In this chapter, we showed the first pack of basic widgets of the
PyGTK programming library. 
</p>


<br>
<div class="center"> 
<script type="text/javascript"><!--
google_ad_client = "pub-9706709751191532";
/* horizontal */
google_ad_slot = "1734478269";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script> 
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> 
</script> 
</div> 

<br>


<div class="botNav, center">
<span class="botNavItem"><a href="/">Home</a></span> ‡ <span class="botNavItem"><a href="..">Contents</a></span> ‡
<span class="botNavItem"><a href="#">Top of Page</a></span>
</div>


<div class="footer">
<div class="signature">
<a href="/">ZetCode</a> last modified February 12, 2009  <span class="copyright">&copy; 2007 - 2012 Jan Bodnar</span>
</div>
</div>

</div> <!-- content -->

</div> <!-- container -->

</body>
</html>



